/* Date Field */

.datechooser {
	&:before {
		content: " ";
		clear: both;
	}
}

.calendar {
	&:before {
		content: " ";
		clear: both;
	}
	overflow: hidden;
	min-width: 240px;
	border: solid 1px rgba(204, 204, 204, 0.5);
	position: relative;
	background: #fff;

	.dt {
		height: 40px;
		border-bottom: solid 1px rgba(204, 204, 204, 0.5);
		background-color: #fff;
		background-repeat: repeat-x;
		position: relative;
		.ym {
			padding: 10px 23px;
			text-align: center;
			font-size: 14px;
		}
		.ym span {
			padding: 0 12px;
			background-position: 100% -300px;
			cursor: pointer;
			&:after {
				content: "";
				display: inline-block;
				width: 8px;
				height: 8px;
				margin: 0px 10px 5px;
				border-top: 1px solid #000;
				border-right: 1px solid #000;
				transform: rotate(135deg);
				-webkit-transform: rotate(135deg);
			}
		}
		.ym a {
			text-decoration: none;
			line-height: 21px;
			color: #333;
			font-weight: bold;
		}
		.pr {
			position: absolute;
			top: 0px;
			left: 10px;
		}
		.ne {
			position: absolute;
			top: 0px;
			right: 10px;
		}
		.pr a {
			background: url("../../image/icon/calendar/icon-prev-month.svg")
				center center no-repeat;
		}
		.ne a {
			background: url("../../image/icon/calendar/icon-next-month.svg")
				center center no-repeat;
		}
		.pr a,
		.ne a {
			display: block;
			width: 40px;
			height: 40px;
			background-size: 16px;
		}
		.miscBtn {
			position: absolute;
			top: 10px;
			right: 8px;
			width: 40px;
			height: 40px;
			color: #fff;
			font-size: 12px;
			text-indent: -10000px;
			background: url("../../image/icon/calendar/icon-add.svg") center
				center no-repeat;
			background-size: 100%;
		}
	}
	.ympop {
		display: none;
		width: 100%;
		font-size: 16px;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		height: 280px;
		.ym {
		}
		.mm {
			float: left;
			width: 50%;
			border-right: solid 1px #85a7ca;
		}
		.yy {
			float: right;
			width: 50%;
		}
		.yt {
			height: 35px;
			position: relative;
		}
		.pr,
		.ne {
			position: absolute;
			top: 14px;
		}
		.pr {
			left: 20px;
		}
		.pr a {
			display: block;
			width: 14px;
			height: 14px;
			border-left: 2px solid #444;
			border-top: 2px solid #444;
			-webkit-transform: rotate(-45deg);
		}
		.ne {
			right: 10px;
		}
		.ne a {
			display: block;
			width: 14px;
			height: 14px;
			border-right: 2px solid #444;
			border-top: 2px solid #444;
			-webkit-transform: rotate(45deg);
		}
		ul {
			padding-top: 3px;
		}
		li {
			float: left;
			width: 50%;
			height: 35px;
			padding: 1px 2px;
			list-style: none;
		}
		li a {
			display: block;
			overflow: hidden;
			// border: solid 1px #fff;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: center;
			text-decoration: none;
			line-height: 35px;
			color: #000;
		}
		li a:hover {
			border-color: #ddd;
			background-color: #eee;
			border-radius: 3px;
			color: #000;
		}
		.selected a {
			border-color: #8abeff;
			background: #c5dfff;
			border-radius: 3px;
			border: solid #fff 1px;
		}
		.disabled a,
		.disabled a:hover {
			color: #999;
			border: none;
			background: none;
			cursor: default;
		}
		.le {
			float: left;
		}
		.ri {
			float: right;
		}
		.bt,
		.bt span {
			display: block;
			cursor: pointer;
		}
		.bt {
			float: left;
			padding: 0 5px;
			text-decoration: none;
			color: #036;
		}
		.bt span {
			float: left;
			padding: 2px 20px;
			line-height: 30px;
			background: #c5dfff;
			border: 1px solid #8abeff;
		}
		.le .bt {
			float: right;
		}
		.ri .bt {
			float: left;
		}
	}
	.bd {
		background-color: #fff;
		font-size: 12px;
		color: #333333;
		font-weight: bold;
		overflow: hidden;
		width: 100%;

		.slide-wrap {
			display: flex;
			width: 300%;
			padding: 10px 0;
		}
	}
	tr {
		height: 32px;
		line-height: 32px;
	}
	.di {
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
		width: 33.3333%;
		position: relative;
	}
	th {
		width: 14.28%;
		//background-color: #112935;
		background-position: 0 -350px;
		background-repeat: repeat-x;
		cursor: default;
		color: #989db3;
		span {
			display: block;
			text-align: center;
			//color: #fff;
			text-shadow: 0px 1px 0px #f3f8fc;
		}
	}

	td {
		padding: 1px;
		cursor: pointer;
		position: relative;
		a {
			display: block;
			text-align: center;
			line-height: 30px;
			width: 30px;
			color: #000;
		}
		a:hover {
			text-decoration: none;
			border-radius: 50%;
		}
		&.dot {
			&:before {
				content: " ";
				display: block;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: red;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -3px;
			}
			&.sign {
				&:before {
					background-color: green;
				}
			}
			&.leave {
				&:before {
					background-color: orange;
				}
			}
		}
	}
	.today {
		font-weight: bold;
		background-position: 0 -500px;
		&:hover {
			background-position: 0 -550px;
		}
	}
	.selected {
		a,
		a:hover {
			text-shadow: 0px 1px 0px #fff;
			background-color: #5867c4;
			border-radius: 50%;
			color: #fff;
		}
		.today,
		.today:hover {
			background-position: 0 -600px;
		}
	}
	.inactive a {
		color: #999;
		display: block;
		text-align: center;
		line-height: 35px;
		width: 35px;
	}
	.Ft {
		height: 50px;
		border-top: solid 1px #85a7ca;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 0px;
		width: 100%;
	}

	&.view-week {
		.dt {
			.ym span {
				&:after {
					display: none;
				}
			}
		}
	}
}

.calendar-link {
	position: relative;
	padding-right: 20px;
	line-height: 20px;
	border: 0;
	outline: 0;
	&:before {
		content: " ";
		position: absolute;
		top: 0px;
		right: 0px;
		width: 20px;
		height: 20px;
		.icon-down;
		background-size: 10px;
		background-repeat: no-repeat;
		background-position: center;
	}
}

.tb-line {
	.calendar {
		border: none;
	}
}
